<template>
	<bigScreenContainer autoFullScreen>
		<div class="page_board" :style="{
			background: `url(${componentContent.imageMap['bg']}) no-repeat center center`,
			'background-size': '100%',
		}">
			<div class="time">{{ currentDate }}&nbsp;&nbsp;&nbsp;&nbsp;{{ currentTime }}</div>
			<div class="xsdt" @click="toPage('/model/SaleMap')">销售地图</div>
			<div class="ccjsc" @click="toPage('/model/sellingcockpit')">仓储驾驶舱</div>
			<div class="xsjsc" @click="toPage('/model/developcockpit')">销售驾驶舱</div>
			<div class="scjsc" @click="toPage('/model/purchasecockpit')">生产驾驶舱</div>
			<div class="yfjsc" @click="toPage('/model/warehousecockpit')">研发驾驶舱</div>
			<div class="zljsc" @click="toPage('/model/productioncockpit')">质量驾驶舱</div>
			<div class="cgjsc" @click="toPage('/model/qualitycockpit')">采购驾驶舱</div>
			<div class="hjjsc" @click="toPage('/model/environmentalcockpit')">环境驾驶舱</div>
			<div class="bottom">
				<div class="ddl"><span>累计订单量：{{ ddl }}万件</span></div>
				<div class="chl"><span>累计出货量：{{ chl }}万件</span></div>
			</div>
			<!-- <div class="page_header" :style="{
                    background: `url(${componentContent.imageMap['bg_head']}) no-repeat`,
                    'background-size': '100% 100%',
                }"> -->
			<!-- <div class="page_header" :style="{ 'background-size': '100% 100%' }">
				<span>腾 洋 光 学 仪 器</span>
			</div> -->
			<!-- <div class="page_content">
				<div class="left_menu">
					<div class="menu">
						<div @click="toPage('/model/SaleMap')">
							<div class="icon"><img src="./icon-menu9.png" /></div>
							<div class="name">销售地图</div>
						</div>
					</div>
					<div class="menu">
						<div @click="toPage('/model/sellingcockpit')">
							<div class="icon"><img src="./icon-menu1.png" /></div>
							<div class="name">销售驾驶舱</div>
						</div>
					</div>
					<div class="menu">
						<div @click="toPage('/model/developcockpit')">
							<div class="icon"><img src="./icon-menu2.png" /></div>
							<div class="name">研发驾驶舱</div>
						</div>
					</div>
					<div class="menu">
						<div @click="toPage('/model/purchasecockpit')">
							<div class="icon"><img src="./icon-menu3.png" /></div>
							<div class="name">采购驾驶舱</div>
						</div>
					</div>
				</div>
				<div class="right_menu">
					<div class="menu">
						<div @click="toPage('/model/warehousecockpit')">
							<div class="icon"><img src="./icon-menu4.png" /></div>
							<div class="name">仓储驾驶舱</div>
						</div>
					</div>
					<div class="menu">
						<div @click="toPage('/model/productioncockpit')">
							<div class="icon"><img src="./icon-menu5.png" /></div>
							<div class="name">生产驾驶舱</div>
						</div>
					</div>
					<div class="menu">
						<div @click="toPage('/model/qualitycockpit')">
							<div class="icon"><img src="./icon-menu6.png" /></div>
							<div class="name">质量驾驶舱</div>
						</div>
					</div>
					<div class="menu">
						<div @click="toPage('/model/environmentalcockpit')">
							<div class="icon"><img src="./icon-menu7.png" /></div>
							<div class="name">环境驾驶舱</div>
						</div>
					</div>
				</div>
			</div> -->
		</div>
	</bigScreenContainer>
</template>
<script>
export default {
	name: "mainPage",
	data() {
		return {
			componentContent,
			ddl: "6278.23",
			chl: "5434.23",
			currentTime: '',
			currentDate: '',
			timer: null,
		};
	},
	computed: {},
	async created() {
		await this.WitGlobal.requestCode(
			"SJKB.ZH.db.manage.ddlchl",
			{}
		).then((res) => {
			if (res.code == 200) {
				this.ddl = Math.floor((res.data[0].zh_ddl / 10000) * 100) / 100;
				this.chl = Math.floor((res.data[0].zh_chl / 10000) * 100) / 100;
			}
		})
		this.updateTime();
		this.timer = setInterval(this.updateTime.bind(this), 1000);
	},
	mounted() {
	},
	methods: {
		observeScrollBar() {
			const tableBody = this.$refs.table.$el.querySelector('.el-table__body-wrapper');
			if (tableBody) {
				this.observer = new MutationObserver(() => {
					const hasScrollBar = tableBody.scrollHeight > tableBody.clientHeight;
					console.log('滚动条是否渲染完成:', hasScrollBar);
				});
				this.observer.observe(tableBody, { childList: true, subtree: true });
			}
		},
		toPage(path) {
			this.$router.push({ path: path })
		},
		updateTime() {
			const now = new Date();
			// 获取北京时间（本地时间 + 时区偏移量修正）
			const beijingOffset = 8 * 60; // 北京时间相对于 UTC 的偏移量（分钟）
			const localOffset = now.getTimezoneOffset(); // 当前本地时区偏移量（分钟）
			const timestamp = now.getTime() + (beijingOffset - localOffset) * 60 * 1000;
			const beijingTime = new Date(timestamp);

			// 格式化时间
			const year = beijingTime.getFullYear();
			const month = String(beijingTime.getMonth() + 1).padStart(2, "0");
			const day = String(beijingTime.getDate()).padStart(2, "0");
			const hours = String(beijingTime.getHours() + 8).padStart(2, "0");
			const minutes = String(beijingTime.getMinutes()).padStart(2, "0");
			const seconds = String(beijingTime.getSeconds()).padStart(2, "0");

			this.currentDate = `${year}-${month}-${day}`;
			this.currentTime = `${hours}:${minutes}:${seconds}`;
		},
	},
};
</script>
<style scoped>
.page_board {
	width: 1920px;
	height: 1080px;
	background: #111726;
	background-image: url(./bg.jpg);
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center center;
	position: relative;
}

.page_board>div {
	width: 200px;
	height: 100px;
	font-size: 30px;
	color: #fff;
	position: absolute;
	cursor: pointer;
	text-align: center;
	line-height: 100px;
}

.page_board .time {
	padding-left: 16px;
	width: 200px;
	height: 20px;
	font-size: 16px;
	color: #627287;
}

.xsdt {
	left: 356px;
	top: 116px
}

.ccjsc {
	right: 370px;
	top: 116px
}

.xsjsc {
	left: 212px;
	top: 326px
}

.scjsc {
	right: 212px;
	top: 326px
}

.yfjsc {
	left: 130px;
	top: 576px
}

.zljsc {
	right: 128px;
	top: 576px
}

.cgjsc {
	left: 204px;
	top: 844px
}

.hjjsc {
	right: 200px;
	top: 844px
}

.bottom {
	width: 700px !important;
	height: 20px;
	left: 604px;
	bottom: 0px;
	display: flex;
	justify-content: space-around;
}

/* .ddl {
	width: 300px !important;
	height: 20px;
	left: 600px;
	bottom: 0px
} */

.ddl span {
	font-weight: 600;
	font-size: 20px;
	color: #ffffff;
	text-shadow: 0px 10px 10px rgba(0, 0, 0, 0.2);
	background: linear-gradient(0deg, #99bbff 0%, #ffffff 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	text-align: center;
}

/* .chl {
	width: 300px !important;
	height: 20px;
	left: 900px;
	bottom: 0px
} */

.chl span {
	font-weight: 600;
	font-size: 20px;
	color: #ffffff;
	text-shadow: 0px 10px 10px rgba(0, 0, 0, 0.2);
	background: linear-gradient(0deg, #99bbff 0%, #ffffff 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	text-align: center;
}
</style>